<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/common/css/swiper-3.4.2.min.css">
  <link rel="stylesheet" href="/common/css/animate.min.css">
  <link rel="stylesheet" href="/common/layui/css/layui.css">
  <link rel="stylesheet" href="/common/css/mobile.css">
</head>

<body>
  <div id="body" class="mobielIndex">
    <div class="header" :class="menuType?'on':''">
      <img class="logo" src="/images/mobile/logo01.png" alt="">
      <div class="menu menuTaggle">
        <img v-if="!menuType" class="menuimg" src="/images/mobile/menu01.png" alt="">
        <img v-else class="closeimg" src="/images/mobile/close.png" alt="">
      </div>
    </div>
    <div class="content">
      <div class="mobiel_left">
        <ul>
          <li class="mobli" :data-tipid="item.tipId" v-for="(item, index) in menuList" :key="index">
            {{item.name}}
          </li>
        </ul>
      </div>
      <div class="mobiel_right">
        <!-- <div class="shadowMask menuTaggle"></div> -->
        <!-- banner图 -->
        <div id="bannerBox" class="swiper-container bannerBox">
          <div class="swiper-wrapper">
            <div class="swiper-slide" :data-title="item.title" v-for="(item, index) in bannerList" :key="index">
              <img class="img" :src="item.imageUrl" alt="">
            </div> 
          </div>
          <div class="swiper-pagination"></div>
          <div class="nextPrev"  data-idName="lightworks">
            <img  class="img animate__animated animate__infinite animate__fadeInDown" src="/images/nextPrev.png" alt="">
          </div>
        </div> 
        <!-- 光羽动态 -->
        <div id="lightworks" class="lightworks">
          <div class="light_title">
            <img class="img" src="/images/mobile/title01.png" alt="">
          </div>
          <div class="workslist">
            <ul>
              <li v-for="(item, index) in workList" :key="index">
                <a href="http://www.baidu.com" target="_blank">
                  <div class="cover">
                    <img class="img" :src="item.imgurl">
                  </div>
                  <div class="boxMsg">
                    <div class="MsgTitel">标题</div>
                    <div class="data">
                      2021.03.06
                    </div>
                    <div class="content">
                      “ AFK”游戏视频发布，上线于XXXX平台，收到人民网点名表扬。去年四月，从员工那里收集想法并设计下一项工作...
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <div class="nextPrev"  data-idName="animateLight">
            <img  class="img animate__animated animate__infinite animate__fadeInDown" src="/images/nextPrev.png" alt="">
          </div>
        </div>
        <!-- 光羽动画 -->
        <div id="animateLight" class="animateLight">
            <img class="backbg" src="/images/mobile/backbg.png" alt="">
            <img class="logoimg" src="/images/mobile/logo02.png" />
            <div class="text">
              是一家主要经营影视动画、游戏研发为主要方向的文创类科技公司。目前公司旗下拥有开发以及影视中心和美术中心三大业务板块设置。
            </div>
            <div class="nextPrev"  data-idName="introducTwo">
              <img  class="img animate__animated animate__infinite animate__fadeInDown" src="/images/nextPrev.png" alt="">
            </div>
        </div>
        <!-- 环境氛围 -->
        <div id="introducTwo" class="introducTwo">
          <div id="introduc_swiper" class="swiper-container introduc_swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide animate__animated" data-name="animate__tada" data-current="item.id" v-for="(item, index) in introducList" :key="index">
                <img class="imgCover" :layer-src="item.bigSrc"  :src="item.src" alt="" >
              </div>
            </div>
            <div class="introduc-pagination"></div>
          </div>
          <div class="nextPrev"  data-idName="CGanimationBox">
            <img  class="img animate__animated animate__infinite animate__fadeInDown" src="/images/nextPrev.png" alt="">
          </div>
        </div>
        <!-- 一屏滚动块 -->
        <div id="swiperBoxCont" class="swiperBoxCont swiper-container "> 
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img class="Msgtitle" src="/images/mobile/titleIcon01.png" alt="">
              <!-- CG动画 -->
              <div id="CGanimationBox" class="CGanimationBox">
                <div class="swiper-container CGanimation">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide"  :data-link="item.videoLink" v-for="(item, index) in CGanimationList" :key="index">
                      <img class="img" :src="item.imgUrl" alt="">
                      <img class="playerIcon" src="/images/mobile/playerIcon.png" alt="">
                    </div> 
                  </div>
                </div>
                <div class="swiper-container small_CGanimation">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" :data-current="index" v-for="(item, index) in CGanimationList" :key="index">
                      <div class="shadowMask" v-if="index!=CGanimationIndex"></div>
                      <div v-else class="showMsg">
                        {{item.name}}
                      </div>  
                      <img class="img" :src="item.imgUrl" alt="">
                    </div> 
                  </div>
                </div>
                <div class="nextPrev_s"  data-idName="next">
                  <img  class="img animate__animated animate__infinite animate__fadeInDown" src="/images/nextPrev.png" alt="">
                </div>
                
              </div>
            </div>
            <div class="swiper-slide">
              <img class="Msgtitle" src="/images/mobile/titleIcon02.png" alt="">
              <!-- 买量视频 -->
              <div id="videoBuyBox" class="videoBuyBox">
                <div class="swiper-container CGanimation">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide"  :data-link="item.videoLink" v-for="(item, index) in VideoButList" :key="index">
                      <img class="img" :src="item.imgUrl" alt="">
                      <img class="playerIcon" src="/images/mobile/playerIcon.png" alt="">
                    </div> 
                  </div>
                </div>
                <div class="swiper-container small_CGanimation">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" :data-current="index" v-for="(item, index) in CGanimationList" :key="index">
                      <div class="shadowMask" v-if="index!=VideoBuyIndex"></div>
                      <div v-else class="showMsg">
                        {{item.name}}
                      </div>  
                      <img class="img" :src="item.imgUrl" alt="">
                    </div> 
                  </div>
                </div>
                <div class="nextPrev_s"  data-idName="next">
                  <img  class="img animate__animated animate__infinite animate__fadeInDown" src="/images/nextPrev.png" alt="">
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <!-- 2d美术 -->
              <div id="tdArtList" class="tdArtList"> 

                <div id="tdArtBox" class="swiper-container tdArtList">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in tdartList" :key="index">
                      <img class="img" :layer-src="item.imgUrl"  :src="item.imgUrl" alt="">
                    </div>
                  </div>
                </div>

                <div class="nextPrev_s"  data-idName="next">
                  <img  class="img animate__animated animate__infinite animate__fadeInDown" src="/images/nextPrev.png" alt="">
                </div>
                <img class="Msgtitle" src="/images/mobile/titleIcon03.png" alt="">
              </div>
            </div>
            <div class="swiper-slide">
              <!-- 3d美术 -->
              <div id="three_dArtList" class="three_dArtList">
                <div class="swiper-container three_dArtList">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in tdartList" :key="index">
                      <img class="img" :layer-src="item.imgUrl"  :src="item.imgUrl" alt="">
                    </div>
                  </div>
                </div>
                <div class="nextPrev_s"  data-idName="next">
                  <img  class="img animate__animated animate__infinite animate__fadeInDown" src="/images/nextPrev.png" alt="">
                </div>
                <img class="Msgtitle" src="/images/mobile/titleIcon04.png" alt="">
              </div>
            </div>
            <div class="swiper-slide">
              <!-- 光羽动画音乐 -->
              <div id="audioBox" class="audioBox">
                <div class="audio_swiper swiper-container">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" :data-link="item.link" v-for="(item, index) in audioList" :key="index">
                      <img class="img" :src="item.imgUrl" alt="">
                      <img class="button" src="/images/playButton.png">
                      <div class="autioMsg">
                        <div class="title">《守望》配乐</div>
                        <div class="content">
                          CG动画《守望》又名《Watch over》出自xxx作品，2021年上映与xxx，获得xxx奖项与xxx。
                        </div>
                      </div>
                      <div class="shadowMask"></div>
                    </div>
                  </div>
                  <div class="swiper-button-prev swiper-button-white"></div>
                  <div class="swiper-button-next swiper-button-white"></div>
                </div>
                <div class="nextPrev_s"  data-idName="prev">
                  <img  class="img animate__animated animate__infinite animate__fadeInDown" src="/images/nextPrev_02.png" alt="">
                </div>
                <img class="Msgtitle" src="/images/mobile/titleIcon05.png" alt="">
              </div>
            </div>
          </div>
        </div>
         
        <!-- 合作范围 -->
        <div id="contactMsg" class="contactMsg">
          <div class="labletitle">合作范围</div>
          <div class="label">
            <div class="labtext">
              <span>商务合作</span>
              <span>(游戏/动漫/影视/音乐)</span>
            </div>
            <div class="button">获取信息</div>
          </div> 
          <div class="label">
            <div class="labtext">
              <span>品牌及推广</span>
              <span>(组织:媒体关系/媒体推广/异业合作）</span>
            </div>
            <div class="button">获取信息</div>
          </div>
          <div class="label">
            <div class="labtext">
              <span>公共关系</span>
              <span>(协调:政府关系/行业组织/展示会议/公关活动)</span>
            </div>
            <div class="button">获取信息</div>
          </div>
          <div class="contactUSMsg">
            <span>电话: 027-59728910</span>
            <span>邮箱：xxxxxxxxxxxxxxxxxx</span>
            <span>
              地址:广州市天河区天河软件园建工路51号 (邮编: 510000)
            </span>
          </div>
        </div>
        <!-- 地址信息 -->
        <div class="address">
          <div class="light_title">
            <img class="img" src="/images/mobile/title02.png" alt="">
          </div>
          <div id="dituContent" class="dituContent"></div>
        </div>
        <!-- 底部 -->
        <div class="footer">
          <div class="foot_label">
            
            <div class="labli btn" data-clipboard-action="copy" data-clipboard-text="907484574">
              <img class="qqIcon "  src="/images/QQ.png" alt="">
            </div>
            <div class="labli btn" data-clipboard-action="copy" data-clipboard-text="907484574@qq.com">
              <img class="qqIcon "  src="/images/email.png" alt="">
            </div>
          </div>
          <div class="footerMsg">
            <span>联系电话: 027-59728910</span>
            <span>地址:广州市天河区天河软件园建工路51号 (邮编: 510000)</span>
            <span>
              COPYRIGHT © 2018-2030 火羽数码科技有限公司.ALL RIGHT RESERVED 鄂ICP备18024288号
            </span>
          </div>
        </div>
      </div>
      <!-- 视频通用 -->
    <div  class="layVideo">
      <video id="layVideo" :src="layVideolink" autoplay controls></video>
    </div>
    <!-- 音频通用 -->
    <div class="layAudio layVideo">
      <audio id="layAudio" :src="layAudioLink" autoplay controls></audio>
    </div>
    </div>
  </div>
</body>

</html>
<script type="text/javascript"  src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"  src="/common/js/swiper-3.4.2.min.js"></script>
<script type="text/javascript"  src="/common/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript"  src="/common/layui/layui.js"></script>
<script type="text/javascript"  src="/common/js/clipboard.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script src="/common/js/mobile.js"></script>